<template>
	<image v-if="qrCodeUrl" :src="qrCodeUrl" :style="[{width: size + 'px', height: size + 'px'}]" @click="$emit('click')"/>
	<uqrcode v-else-if="content" ref="uqrcode" canvas-id="uqrcode" :value="content" :size="size" :options="{margin: parseFloat(margin), foregroundColor, backgroundColor}" @complete="qrCodeImage" @click="$emit('click')"/>
</template>

<script>
	
	import base from '@/components/index.vue'
	
	export default {
		extends: base,
		props: {
			// 二维码内容
			content: String,
			// 是否要生成图片
			isImage: Boolean,
			// 二维码尺寸
			size: {
				type: [String, Number],
				default: 120
			},
			// 内嵌距离
			margin: {
				type: [String, Number],
				default: 10
			},
			// 前景颜色 - 二维码线条颜色
			foregroundColor: String,
			// 背景颜色 - 二维码背景颜色
			backgroundColor: {
				type: String,
				// 必须指定一个值或者透明
				default: 'transparent'
			}
		},
		data() {
			return {
				qrCodeUrl: ''
			}
		},
		mounted() {
			
		},
		methods: {
			// 生成了二维码图片
			qrCodeImage({success}) {
				if (success && this.isImage) {
					this.$refs.uqrcode.toTempFilePath({
						success: res => {
							// 得到的都是base64
							// #ifdef MP-WEIXIN
							const arrayBuffer = wx.base64ToArrayBuffer(res.tempFilePath)
							const fs = wx.getFileSystemManager()
							const filePath = `${wx.env.USER_DATA_PATH}/QrcodeTempImage.png`
							fs.writeFile({
							    filePath: filePath,
							    data: arrayBuffer,
							    encoding: 'binary',
							    success: function() {
							        this.qrCodeUrl = filePath
							    },
							    fail: function(err) {
							        console.error('文件保存失败', err)
							    }
							})
							// #endif
							// #ifndef MP-WEIXIN
							const base64ToBlob = (base64Data) => {
								let arr = base64Data.split(','),
									fileType = arr[0].match(/:(.*?);/)[1],
									bstr = atob(arr[1]),
									l = bstr.length,
									u8Arr = new Uint8Array(l);
									while (l--) {
										u8Arr[l] = bstr.charCodeAt(l)
									}
									return new Blob([u8Arr], {
										type: fileType
									})
							}
							const imgUrl = URL ? URL.createObjectURL(base64ToBlob(res.tempFilePath)) : res.tempFilePath
							this.qrCodeUrl = imgUrl
							// #endif
						}
					})
				}
			},
		}
	}
</script>

<style>
</style>